<template>
  <div class="p-20 p-t-0 box-shadow-1">
    <div class="table-search" style="width: 100%">
      <el-row :gutter="24">
        <el-col :span="8">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">供应商</div>
            <el-select v-model="supplier" filterable placeholder="请选择供应商" size="medium" class="w-100p">
              <el-option
                v-for="item in suppliers"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state.key!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <el-input v-model="input" @keyup.enter.native="keyDown($event)" placeholder="请输入单号" size="medium" class="w-100p">
            <template slot="prepend">
              <el-button>单号</el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">单据类型</div>
            <el-select v-model="orderType" filterable placeholder="请选择单据类型" class="w-100p" size="medium">
              <el-option
                v-for="item in orderTypes"
                :key="item.key"
                :label="item.text"
                :value="item.key">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-top: 15px;">
        <el-col :span="8" >
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">订单起始日期</div>
            <el-date-picker size="medium"
              v-model="createAt"
              type="date"
              class="w-100p"
              format="yyyy-MM-dd"
             value-format="yyyy-MM-dd"
              placeholder="选择订单起始日期" >
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="8"  >
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">订单截止日期</div>
            <el-date-picker size="medium"
              v-model="createAt1"
              type="date"
              class="w-100p"
              format="yyyy-MM-dd"
           value-format="yyyy-MM-dd"
              placeholder="选择订单终止日期" >
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="8"  style="padding-right: 0px;padding-left: 0px; text-align: left">
          &nbsp;&nbsp;
          <el-button size="medium" class="btn-info"  icon="el-icon-search" @click="search(1)">搜索</el-button>
          <el-button size="medium" class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="clearSearch">重置</el-button>
        </el-col>

      </el-row>
    </div>
    <div class="table-padding">
      <div class="title-buttons">
        <router-link v-hasPermission="'management_storeInOrder:edit'" to="/hqStoreInOrders/add">
          <el-button  class="title-button btn-primary" size="medium" icon="el-icon-plus">新建&nbsp;</el-button>
        </router-link>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :border="true"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          label="单号" width="145">
          <template  slot-scope="scope">
            <span>{{scope.row.no}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单据类型" width="125">
          <template  slot-scope="scope">
            <span v-if="scope.row.type">{{scope.row.type.text}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="供应商">
          <template  slot-scope="scope">
            <span>{{scope.row.supplierName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="仓库">
          <template  slot-scope="scope">
            <span>{{scope.row.warehouseName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="商品信息库">
          <template  slot-scope="scope">
            <span>{{scope.row.storeName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="总金额">
          <template  slot-scope="scope">
            <span>{{scope.row.amount|money}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实付金额">
          <template scope="scope">
            <span>{{scope.row.payAmount |money}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="优惠金额">
          <template scope="scope">
            <span>{{scope.row.giftAmount|money}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="欠款金额">
          <template scope="scope">

            <span v-if="scope.row.payAmount">{{(scope.row.amount? scope.row.amount :0)-(scope.row.payAmount? scope.row.payAmount:0)-(scope.row.giftAmount? scope.row.giftAmount:0) | money}}</span>
            <span v-if="!scope.row.payAmount">{{scope.row.amount |money}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="入库日期">
          <template  slot-scope="scope">
            <span>{{scope.row.inTime}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column-->
          <!--label="金额">-->
          <!--<template  slot-scope="scope">-->
            <!--<span>{{scope.row.amount|money}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
          label="状态">
          <template  slot-scope="scope">
            <span v-if="scope.row.state">{{scope.row.state.text}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作时间">
          <template  slot-scope="scope">
            <span>{{scope.row.createAt}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="210">
          <template  slot-scope="scope">
            <router-link :to="'/hqStoreInOrders/add?type=5&id='+scope.row.id">
              <el-button type="text" size="small" class="m-r-5">查看</el-button>
            </router-link>
            <router-link v-hasPermission="'management_storeInOrder:edit'" :to="'/hqStoreInOrders/add?id='+scope.row.id" v-if="scope.row.state.key=='NOAUDIT'">
              <el-button type="text" size="small"
                         class="m-r-5"
                         @click="handleEdit(scope.$index, scope.row)"> | 修改</el-button>
            </router-link>
            <el-button v-hasPermission="'management_storeInOrder:destory'" v-if="scope.row.state.key=='NOAUDIT'"
                        type="text"
                        size="small"
                        class="m-r-5"
                        @click="handleDelete(scope.$index, scope.row)"> | 删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <br>
      <div class="block">
        <el-row>
          <el-col :span="24" class="text-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="pageSizeSet"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>

    <PluginConfirm
      :show="dialogIsShow"
      @chooseSure="chooseSure()"
      @chooseCancel="chooseCancel()"
      @dialogResult="dialogResult">
    </PluginConfirm>
  </div>
</template>
<script>

  export default{
    data(){
      return {
        tableData: [],
        loading:false,
        pageSizeSet:window.pageSizes,
        pageSize:window.pageSize,
        currentPage:1,
        input:"",
        total:0,
        tableIndex:0,
        supplier:"",
        warehouse:"",
        suppliers:[],
        orderType:"",
        orderTypes:[
        ],
        createAt:"",
        createAt1:"",
        type:"",
        activeName2: 'first',

        dialogIsShow:false,
        curDataRow:null,
        curDataIndex:0
      }
    },
    created(){
      window.this = this;
     this.initData();
    },
    components: {

    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      initData(){
        this.loading=true;
        this.$axios.get("stores/storeInOrders?page.pn=1&page.size=" + this.pageSize).then((data)=>{
          if(data.status==200){
            this.loading=false;
            var data=data.content;
            this.tableData=data.storeInOrderPage.content;
            this.total=data.storeInOrderPage.total;
            this.suppliers=data.suppliers;
            this.orderTypes=data.storeInTypes;
            this.warehouses=data.warehouses;
          }else{
            this.loading=false
          }
        })
      },


      handleSizeChange(val){
        this.pageSize=val;
        this.search();
      },
      keyDown(ev){
        if(ev.keyCode==13) {
          this.search(1);
        }
      },
      clearSearch(){
        this.currentPage=1;
        this.supplier="";
        this.input="";
        this.createAt="";
        this.createAt1="";
        this.orderType="";
        this.search(1);
      },
      search(content){
        var search="";
        if(content==1){
          search="search.no_like="+this.input+"&"+search;
        }
        if(this.supplier!=""){
          search="search.supplierId_eq="+this.supplier+"&"+search;
        }
        if(this.createAt!=""){
          console.log(this.createAt);
          search="search.inTime_gte="+this.createAt+" 00:00:00&"+search;
        }
        if(this.createAt1!=""){
          search="search.inTime_lte="+this.createAt1+" 23:59:59&"+search;
        }
        if(this.orderType!="")
        {
          search="search.type_eq="+this.orderType+"&"+search;
        }

        this.$axios.get("stores/storeInOrders?"+search+"page.size="+this.pageSize).then((data)=>{
          if(data.status==200){
            var data=data.content;
            this.tableData=data.storeInOrderPage.content;
            this.total=data.storeInOrderPage.total;
            this.loading=false
          }else{
            this.loading=false
          }
        })
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.$axios.get("stores/storeInOrders?page.pn="+currentPage+"&page.size="+this.pageSize).then((data)=>{
          if(data.status==200){
            var data=data.content;
            this.tableData=data.storeInOrderPage.content;
            this.total=data.storeInOrderPage.total;
            this.loading=false
          }else{
            this.loading=false
          }
        })
      },
      goBack() {
        this.router.go(-1);
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      /*用户选择提示框后处理*/
      dialogResult(param){
        this.dialogIsShow=param.close;
        if(param.choose==="ok"){
          //console.log("确定");
          this.$axios.delete("stores/storeInOrders/"+this.curDataRow.id).then((data)=>{
            if(data.status==200){
              this.tableData.splice(this.curDataIndex,1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initData();
            }else{
              this.$message({
                type: 'error',
                message: data.message
              });
            }
          })
        }else if(param.choose==="cancel"){
          //console.log("取消");
        }else{
          //console.log("不做处理");
        }
      },
      handleDelete(index, row) {
        this.curDataIndex = index;
        this.curDataRow = row;
        this.dialogIsShow = true;
        return false;
      },
    }
  }
</script>
<style scoped>
  .divList{
    width: 120px;height: 39px;float:left;line-height: 39px;text-align: center;color: #7f7f7f;
  }

  .divList:hover{
    color:#000000;
  }
  .jiaodian{
    border-top: 1px solid #cccccc;border-top-left-radius: 6px;border-top-right-radius: 6px;border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;border-bottom: 1px solid #FFFFFF;color:#20a0ff;
  }

</style>
